<!--
 * @Descripttion: 角色管理
 * @Author: YuZhenJing
 * @Date: 2020-01-05 21:14:35
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-03-20 15:21:13
 -->
<template>
  <div class="role-list">
    <el-card body-style="padding:8px">
      <div style="margin-bottom: 10px;">
        <el-row :gutter="12">
          <el-col :span="6">
            <el-input
              clearable
              placeholder="角色名称"
              size="mini"
              v-model="searchParams.roleName"
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-select
              clearable
              placeholder="角色类别"
              size="mini"
              style="width:100%"
              v-model="searchParams.roleType"
            >
              <el-option
                :key="item.value"
                :label="item.name"
                :value="item.value"
                v-for="item in roleTypeOptions"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="12" style="text-align: left">
            <el-button
              :loading="tableDataParam.loading"
              @click="request"
              icon="el-icon-search"
              size="mini"
              type="primary"
              >查询</el-button
            >
            <el-button
              @click="windowItem.roleAdd.show = true"
              icon="el-icon-circle-plus-outline"
              size="mini"
              type="primary"
              v-if="$points.permission(auth.add)"
              >新增</el-button
            >
            <el-button
              @click="batchDel"
              icon="el-icon-delete"
              size="mini"
              type="danger"
              v-if="$points.permission(auth.del)"
              >删除</el-button
            >
          </el-col>
        </el-row>
      </div>
      <tf-page
        :current-page="tableDataParam.paginationData.currentPage"
        :data="tableDataParam.data"
        :loading="tableDataParam.loading"
        :pageSize="tableDataParam.paginationData.pageSize"
        :sort-item="tableDataParam.paginationData.sortItem"
        :total="tableDataParam.paginationData.total"
        @doChangeCurrentPage="doChangeCurrentPage"
        @doChangePageSize="doChangePageSize"
        @selectedRow="selectedRow"
        @sortChange="sortChange"
      >
        <el-table-column
          align="center"
          type="selection"
          width="55"
        ></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="角色类别" prop="roleTypeName"></el-table-column>
        <el-table-column
          align="center"
          label="创建人"
          prop="creatorPersonName"
          v-if="userId == 'super'"
          width="120"
        ></el-table-column>
        <el-table-column align="center" label="操作" prop="userId" width="100">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="8">
                <i
                  @click="roleJoinMenu(scope.row)"
                  class="el-icon-menu"
                  style="color:blue;cursor:pointer"
                  v-if="$points.permission(auth.allocation)"
                ></i>
                <i
                  class="el-icon-menu"
                  style="color:rgb(123, 124, 125);
                  cursor:pointer"
                  v-else
                ></i>
              </el-col>
              <el-col :span="8">
                <i
                  @click="roleEdit(scope.row)"
                  class="el-icon-edit"
                  style="color:green;cursor:pointer"
                  v-if="$points.permission(auth.edit)"
                ></i>
                <i
                  class="el-icon-edit"
                  style="color:rgb(123, 124, 125);
                  cursor:pointer"
                  v-else
                ></i>
              </el-col>
              <el-col :span="8">
                <i
                  @click="singleDel(scope.row)"
                  class="el-icon-delete"
                  style="color:red;cursor:pointer"
                  v-if="
                    $points.permission(auth.del) && scope.row.isBuilt == 'no'
                  "
                ></i>
                <i
                  class="el-icon-delete"
                  style="color:rgb(123, 124, 125);
                  cursor:pointer"
                  v-else
                ></i>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </tf-page>
    </el-card>
    <role-add
      :roleTypeOptions="roleTypeOptions"
      :visible.sync="windowItem.roleAdd.show"
      @request="request"
    ></role-add>
    <role-edit @request="request" ref="roleEditRef"></role-edit>
    <role-join-menu ref="roleJoinMenuRef"></role-join-menu>
  </div>
</template>
<script>
import * as rolesService from '@/service/roles'
export default {
  components: {
    'tf-page': require('@/components/common/page/TfPage').default,
    'role-add': require('@/components/module/roles/RoleAdd').default,
    'role-edit': require('@/components/module/roles/RoleEdit').default,
    'role-join-menu': require('@/components/module/roles/RoleJoinMenu').default
  },
  data() {
    return {
      userId: '',
      // 角色类别数据集
      roleTypeOptions: [],
      //查询项对象
      searchParams: {},
      // 窗体相关参数
      windowItem: {
        roleAdd: {
          show: false
        },
        roleEdit: {
          show: false
        }
      },
      //分页表格相关参数
      tableDataParam: {
        loading: false,
        data: [],
        selectedData: [],
        paginationData: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          sortItem: {
            prop: 'r.creator_date',
            order: 'descending'
          }
        }
      },
      auth: {
        list: 'JSCXLB',
        del: 'SCJS',
        edit: 'BJJS',
        add: 'XZJS',
        allocation: 'JSFPGNQD'
      }
    }
  },
  methods: {
    ...rolesService,
    // 初始化过滤项
    initFilter() {
      return {
        roleName: '',
        roleType: ''
      }
    },
    // 排序
    sortChange(sortItem) {
      this.tableDataParam.paginationData.sortItem = {
        prop: sortItem.prop,
        order: sortItem.order
      }
    },
    // 选择下拉框页码
    doChangePageSize(pageSize) {
      this.tableDataParam.paginationData.pageSize = pageSize
    },
    // 更改页码
    doChangeCurrentPage(currPage) {
      this.tableDataParam.paginationData.currentPage = currPage
    },
    // 选择行
    selectedRow(selection) {
      this.tableDataParam.selectedData = selection
    }
  },
  mounted() {
    if (this.$points.permission(this.auth.list)) {
      const userInfo = this.$auth.userInfo.get()
      if (userInfo) {
        this.userId = userInfo.userId
      }
      this.searchParams = this.initFilter()
      this.searchRoleTypeOptions()
      this.request()
    } else {
      this.$router.push({ path: '/403' })
    }
  }
}
</script>
<style lang="stylus" scope></style>
